<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { ref, onMounted, onUnmounted } from 'vue'
import { HomeFilled, Search, User, Close, Expand, Film, Monitor, VideoCamera } from '@element-plus/icons-vue'

// 响应式布局控制
const isMobile = ref(false)
const isMenuOpen = ref(false)

const checkScreenSize = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize)
})

// 导航菜单
const navItems = [
  { name: '首页', path: '/' },
  { name: '搜索', path: '/search' },
  { name: '电影', path: '/movies' },
  { name: '剧集', path: '/tv' },
  { name: '综艺', path: '/variety' },
  { name: '我的', path: '/profile' }
]

// 为getIconForRoute函数添加类型声明
function getIconForRoute(path: string) {
  switch (path) {
    case '/':
      return HomeFilled
    case '/movies':
      return Film
    case '/tv':
      return Monitor
    case '/variety':
      return VideoCamera
    case '/search':
      return Search
    case '/profile':
      return User
    default:
      return HomeFilled
  }
}
</script>

<template>
  <div class="app-container">
    <!-- 桌面端侧边栏 -->
    <el-aside v-if="!isMobile" class="sidebar" width="200px">
      <div class="logo">HahaTV</div>
      <el-menu default-active="$route.path" class="sidebar-menu" router>
        <el-menu-item v-for="item in navItems" :key="item.path" :index="item.path">
          <el-icon>
            <component :is="getIconForRoute(item.path)" />
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区域 -->
    <div class="main-container">
      <!-- 移动端顶部导航 -->
      <el-header v-if="isMobile" class="mobile-header">
        <div class="header-content">
          <div class="logo">VideoApp</div>
          <el-button class="menu-toggle" @click="isMenuOpen = !isMenuOpen" circle
            :icon="isMenuOpen ? 'Close' : 'Expand'" />
        </div>
      </el-header>

      <!-- 移动端侧滑菜单 -->
      <el-drawer v-if="isMobile" v-model="isMenuOpen" direction="ltr" size="70%">
        <el-menu default-active="$route.path" class="mobile-menu" router @select="isMenuOpen = false">
          <el-menu-item v-for="item in navItems" :key="item.path" :index="item.path">
            <el-icon>
              <component :is="getIconForRoute(item.path)" />
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-drawer>

      <!-- 页面内容 -->
      <div class="content">
        <RouterView />
      </div>

      <!-- 移动端底部导航 -->
      <el-footer v-if="isMobile" class="mobile-footer">
        <el-row :gutter="0" class="footer-nav">
          <el-col v-for="item in navItems" :key="item.path" :span="8" class="nav-item">
            <RouterLink :to="item.path" class="nav-link" active-class="active">
              <el-icon>
                <component :is="getIconForRoute(item.path)" />
              </el-icon>
              <span>{{ item.name }}</span>
            </RouterLink>
          </el-col>
        </el-row>
      </el-footer>
    </div>
  </div>
</template>


<style>
.el-aside .el-menu-item {
  color: #fff;


}

.el-aside .el-menu-item:hover,
.el-aside .el-menu-item.is-active {
  color: #409eff;


}
</style>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background-color: #545c64;
  color: white;
  height: 100%;
}

.sidebar .logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #434b52;
}

.sidebar-menu {
  border: none;
  background-color: #545c64;
  color: white;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 移动端样式 */
.mobile-header {
  background-color: #409eff;
  color: white;
  height: 60px;
  padding: 0 15px;
  border-bottom: 1px solid #dcdfe6;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-content .logo {
  font-size: 20px;
  font-weight: bold;
}

.menu-toggle {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.mobile-menu {
  border: none;
}

.mobile-footer {
  background-color: white;
  border-top: 1px solid #dcdfe6;
  padding: 0;
  height: 60px;
}

.mobile-footer .el-col-8 {
  flex: 0 0 20%;
  max-width: 20%;
}

.footer-nav {
  height: 100%;
}

.nav-item {
  text-align: center;
  height: 100%;
}

.nav-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
  text-decoration: none;
}

.nav-link.active {
  color: #409eff;
}

.nav-link .el-icon {
  font-size: 20px;
  margin-bottom: 3px;
}

/* 桌面端适配 */
@media (min-width: 768px) {

  .mobile-header,
  .mobile-footer,
  .mobile-menu {
    display: none;
  }
}

/* 移动端适配 */
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }

  .content {
    padding: 15px;
  }
}
</style>
